<template>
	<view>
		<i class="back-btn iconfont iconzuo" @tap="navBack"></i>
		<view class="live-box" :style="{'margin-top': navBarTop}">
			<view class="live" v-for="item in liveList" :key='item.id' @click="goZhibo(item.id)">
				<image class="live-img" :src="item.logo" mode="widthFix"></image>
				<view class="live-left">
					<image src="../../static/zhibo/zhibo1.png" mode=""></image>直播中
				</view>
				<view class="live-shop">
					{{item.company_name}}
				</view>
			</view>
			<view class="noLive" v-if="liveList.length == 0">
				<image src="../../static/noLive.png" mode="widthFix" style="width: 50%;" class="nolive"></image>
				<view class="">
					暂无直播
				</view>
			</view>
			<view class="noLive" v-if="false">
				<view class="">
					历史直播
				</view>
				<view class="live" v-for="(item,index) in noLiveShowList" :key='item.id' @click="goNoLive(item.id)">
					<image class="live-img" :src="item.poster" mode="widthFix"></image>
					<view class="live-left">
						<image src="../../static/zhibo/zhibo1.png" mode=""></image>录播
					</view>
					<view class="live-shop">
						{{item.content_raw}}
					</view>
				</view>
			</view>
		</view>
		<!-- 直播广告 -->
		<!-- 测试 adpid="1111111111"-->
		<view class="ad-view" >
		  <ad adpid="1240779803" @load="adLoad"></ad>
		</view>
	</view>
</template>

<script>
	import { merchantLive ,getAdReward} from "@/api/product";
	export default {
		data() {
			return {
				liveList : [],
				navBarTop : '0',
				noLiveShowList:[
					{
						id: 1,
						state: "pause",
						video: "http://qqqqshop.ahqqqq.com/video1001.mp4",
						is_poster: true,
						poster: "http://qqqqshop.ahqqqq.com/video1001.png",//封面图地址
						avatar: "http://qqqqshop.ahqqqq.com/video1001.png",
						is_thumb: 0,
						thumb_num: 0,
						comment_num: 0,
						content_raw: "我等这马夹很久了",
					},
					{
						id: 2,
						state: "pause",
						video: "http://qqqqshop.ahqqqq.com/video1002.mp4",
						is_poster: true,
						poster: "http://qqqqshop.ahqqqq.com/video1002.png",//封面图地址
						avatar: "http://qqqqshop.ahqqqq.com/video1002.png",
						is_thumb: 0,
						thumb_num: 0,
						comment_num: 0,
						content_raw: "博朗剃须刀男人的好选择",
					},
					{
						id: 3,
						state: "pause",
						video: "http://qqqqshop.ahqqqq.com/video1003.mp4",
						is_poster: true,
						poster: "http://qqqqshop.ahqqqq.com/video1003.png",//封面图地址
						avatar: "http://qqqqshop.ahqqqq.com/video1003.png",
						is_thumb: 0,
						thumb_num: 0,
						comment_num: 0,
						content_raw: "朵唯·重构想象",
					},
					{
						id: 4,
						state: "pause",
						video: "http://qqqqshop.ahqqqq.com/video1004.mp4",
						is_poster: true,
						poster: "http://qqqqshop.ahqqqq.com/video1004.png",//封面图地址
						avatar: "http://qqqqshop.ahqqqq.com/video1004.png",
						is_thumb: 0,
						thumb_num: 0,
						comment_num: 0,
						content_raw: "AAA级健康抗菌袜子",
					},
					{
						id: 5,
						state: "pause",
						video: "http://qqqqshop.ahqqqq.com/video1005.mp4",
						is_poster: true,
						poster: "http://qqqqshop.ahqqqq.com/video1005.png",//封面图地址
						avatar: "http://qqqqshop.ahqqqq.com/video1005.png",
						is_thumb: 0,
						thumb_num: 0,
						comment_num: 0,
						content_raw: "2020新款工装裤",
					},
					{
						id: 6,
						state: "pause",
						video: "http://qqqqshop.ahqqqq.com/video1006.mp4",
						is_poster: true,
						poster: "http://qqqqshop.ahqqqq.com/video1006.png",//封面图地址
						avatar: "http://qqqqshop.ahqqqq.com/video1006.png",
						is_thumb: 0,
						thumb_num: 0,
						comment_num: 0,
						content_raw: "男士绿裤",
					},
				]
			};
		},
		onLoad(option) {
			this.init();
			/*  #ifdef APP-PLUS  */
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					this.navBarTop = '60upx';
					break;
				case 'ios':
					this.navBarTop = '70upx';
					break;
			}
			/*  #endif  */
		},
		onPullDownRefresh() {
			this.init('refresh');
		},
		methods:{
      adLoad(e){
		  if(uni.getStorageSync('accessToken')){
		  	this.adhttp("ad_live","1240779803")
		  }
        console.log(e)
        // this.token = uni.getStorageSync('accessToken') || undefined;
        // if (this.token) {
        //   this.$post(`${getAdReward}`, {ad_type: 'ad_live', ad_id: e.target.id, ad_open_id: '1240779803'}).then(r => {
        //     console.log(r)

        //   }).catch((err) => {
        //     console.log(err)
        //   });
        // }

      },
			init(type){
				this.$get(`${merchantLive}`, {}).then(async r => {
					console.log(r)
					this.liveList = r.data;
				}).catch(err => {
					
				  console.log(err);
				})
				if (type === 'refresh') {
					uni.stopPullDownRefresh();
				}
			
			},
			navBack(){
				uni.navigateBack();
			},
			goZhibo(id) {
				uni.navigateTo({
					url: `/pages/liveBroadcast/liveBroadcast?id=` + id
				})
			},
			goNoLive(id){
				uni.setStorageSync("videoList",this.noLiveShowList)
				uni.navigateTo({
					url:'/pages/liveBroadcastList/noLive?index='+(id-1)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	
	.live{
		width: 47%;
		display: inline-block;
		vertical-align: top;
		margin: 2% 0 0 2%;
		position: relative;
	}
	.live-box{
		text-align: left;
	}
	.live-img{
		width: 100%;
		border-radius: 6px;
	}
	.live-left{
		position: absolute;
		background: rgba(255,101,136,1);
		border-radius: 6px 0px 6px 0px;
		color: #fff;
		height: 40rpx;
		line-height: 46rpx;
		top: 0;
		left: 0;
		font-size: 12px;
		padding: 0 6px;
		image{
			width: 28rpx;
			height: 28rpx;
			margin-right: 6rpx;
		}
	}
	.live-shop{
		position: absolute;
		bottom: 14rpx;
		background: rgba(0,0,0,0.22);
		width: 100%;
		color: rgba(255,255,255,1);
		line-height: 54rpx;
		border-radius:0px 0px 6px 6px;
		text-align: center;
	}
	.noLive{
		text-align: center;
		padding-top: 315rpx;
		font-weight: 500;
		color: rgba(151,151,151,1);
		line-height: 22px;
	}
	.nolive{
		width: 280rpx;
		height: 280rpx;
	}
	
	.back-btn{
		position:absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 50upx;
		color: $font-color-dark;

	}
</style>
